<template>
  <div>
    <van-button
      class="btn"
      v-for="button in cpButtons"
      :key="button.code"
      :type="button.type || 'primary'"
      :disabled="propDisabled"
      block
      @click="handleButtonClick(button)"
    >
      {{ button.title }}
    </van-button>
</div>
</template>
<script>
export default {
  data() {
    return {
      buttons: [],
      flowKey: '',
      flowNodeValue: ''
    }
  },
  props: {
    propFlowKey: String,
    propButtons: [Array, null],
    propDisabled: {
      type: Boolean,
      default: false
    },
    propSize: {
      type: String,
      default: 'normal'
    }
  },
  created() {
    if (this.propFlowKey) {
      // 节点跟在流程Key后面用“：”隔开，例如 "wo_std:0"
      this.flowKey = this.propFlowKey.split(':')[0]
      this.flowNodeValue = this.propFlowKey.split(':')[1]
      this.$ajax.get('/flow_button/getByFlowKey', { params: { flowKey: this.flowKey }}).then(response => {
        if (response.success) {
          this.buttons = response.data.flowButtons || []
        }
      })
    } else {
      this.buttons = this.propButtons
    }
  },
  computed: {
    cpButtons() {
      // 不传节点值默认显示全部流程按钮
      if (!this.flowNodeValue) return this.buttons
      return this.buttons.filter(button => {
        return button.valueIf.split(',').includes(this.flowNodeValue)
      })
    }
  },
  methods: {
    handleButtonClick(button) {
      this.$emit('button-click', button)
    }
  }
}
</script>
<style lang="scss" scoped>
  .btn {
    margin-top: 10px;
  }
</style>
